	<!DOCTYPE html>
<html>
<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
		<title>商品详情</title>
	</head>
	
	<body>
		<div id="app">
			<div class="header clearfloat top" id="topBar">
				<a href="javascript:history.back(-1)">
					<img src="../img/icon/arrowBack.png" />
				</a>
				<p>商品详情</p>
			</div>
			<div id="container" v-cloak>
				<div class="goods-img">
					<img src="../img/goods.jpg" />
				</div>
				<div class="goodsBox">

					<p class="goods-name">商品名称</p>
					<div class="goods-coachBox inlinkFlex">
						<p class="goods-coachNew">¥9</p>
						<p class="goods-coachOld">¥0.1</p>
					</div>

				</div>
				<div class="goodsDetail">
					<p>商品详情</p>
					<p>这是商品详情介绍</p>
				</div>

				<div class="bottom inlinkFlex-spacebetween">
					<a href="cart.html" class=" cartImg">
						<img src="../img/icon/shop_addCart.png" />
					</a>
					<div class="external addCart" @click="addCartModel=true">

						<span class="tabbar-label">加入购物车</span>
					</div>
					<div class="external addPay" @click="payModel=true">
						<span class="tabbar-label">立即购买</span>
					</div>
				</div>
			</div>
			<!--加入购物车-->
			<transition name="slide-fade" v-cloak>
				<div class="model" v-show="addCartModel">

					<div class="addCart-content" @click.stop="addCartModel=true">
						<div class="cartModel-box inlinkFlex">
							<div class="cartModel-img">
								<img src="../img/goods.jpg" />
							</div>
							<div class="cartModel-text">
								<div class="inlinkFlex-spacebetween">
									<p>商品名称</p>
									<img src="../img/icon/close.png" class="cartClose" @click.stop="addCartModel=false" />
								</div>

								<p class="cartModel-coach">¥9</p>
							</div>

						</div>
						<div class="cartModel-bottom inlinkFlex-spacebetween">
							<p>购买数量</p>
							<div class="cartModel-op">
								<img src="../img/icon/shop_cut.png" @click="onCutGoods()" />
								<input type="text" :value="goodsNum" readonly="" />
								<img src="../img/icon/shop_add.png" @click="onAddGoods()" />
							</div>
						</div>
						<div class="cartModel-addCart" @click.stop="onAddCart()">
							加入购物车
						</div>
					</div>

				</div>
			</transition>
			<!--立即购买-->
			<transition name="slide-fade" v-cloak>
				<div class="model" v-show="payModel">
					<div class="addCart-content" @click.stop="payModel=true">
						<div class="cartModel-box inlinkFlex">
							<div class="cartModel-img">
								<img src="../img/goods.jpg"/>
							</div>
							<div class="cartModel-text">
								<div class="inlinkFlex-spacebetween">
									<p>商品名称</p>
									<img src="../img/icon/close.png" class="cartClose" @click.stop="payModel=false" />
								</div>
								<p class="cartModel-coach">¥9</p>
							</div>
						</div>
						<div class="cartModel-bottom inlinkFlex-spacebetween">
							<p>购买数量</p>
							<div class="cartModel-op">
								<img src="../img/icon/shop_cut.png" @click="onCutGoods()" />
								<input type="text" :value="goodsNum" readonly="" />
								<img src="../img/icon/shop_add.png" @click="onAddGoods()" />
							</div>
						</div>
						<a href="order.html">
							<div class="cartModel-pay">
								下一步
							</div>
						</a>
					</div>
				</div>
			</transition>
			<!--提示成功弹窗-->
			<div class="model" v-show="successModel" v-cloak>
				<div class="model-content tip-content">
					<p>添加成功</p>
					<p @click="successModel=false">确定</p>
				</div>
			</div>
</div>
</body>
</html>